<!DOCTYPE html>
<html lang="en">
<head>
    <title>盈利页面</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="<%=url%>">

    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
    <style>
        #tableXY{
            border:1px none;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="layui-main">
    <!-- 页面上方标题 -->
    <blockquote class="layui-elem-quote">盈利图</blockquote>
</div>
<div id="tableXY">
    <div class="tableX" style="display: flex; align-items: center;margin-left: 1100px">
        <div class="table-cell" style="border: 1px;height: 20px;width: 50px;background-color: #1ED2FF;border-radius: 8px"></div>
        <div style="margin-left: 15px">X-Date</div>
    </div>
    <div class="tableY" style="display: flex; align-items: center; margin-left: 1100px">
        <div class="table-cell" style="border: 1px;height: 20px;width: 50px;background-color: #ff1e1e;border-radius: 8px;margin-top: 20px"></div>
        <div style="margin-top: 23px;margin-left: 15px">Y-Profit</div>
    </div>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="layui-container">
    <div class="layui-row">

        <div class="layui-col-md6">
            <span>药品盈利</span>
            <div id="main" style="width: 100%;height:400px;"></div>
        </div>
        <div class="layui-col-md6">
            <span>门诊盈利</span>
            <div id="main2" style="width: 100%;height:400px;"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function C() {
        $.ajax({
            url: "/receipts/profit",
            contentType:'application/json',
            dataType: 'json',
            success: function (data) {
                console.log(data)
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.x
                    },
                    color:['#1efff8'],
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.y,
                        type: 'line',
                        areaStyle: {}
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                layer.close(layer.index);
            },
            error: function () {
                console.log("ajax error");
            }
        });
    }


    function Mprofit() {
        $.ajax({
            url: "/expenCalend/Mprofit",
            contentType:'application/json',
            dataType: 'json',
            success: function (data) {
                console.log(data)
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main2'));
                // 指定图表的配置项和数据
                var option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.x
                    },
                    color:['#1efff8'],
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.y,
                        type: 'line',
                        areaStyle: {}
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                layer.close(layer.index);
            },
            error: function () {
                console.log("ajax error");
            }
        });
    }
    $(function () {
        C()
    })
    $(function () {
        Mprofit()
    })
</script>
</body>
</html>